@charset "utf-8";
/* CSS Document */

/*banner*/
.ibanner{ height:700px; position:relative;}
.ibanner::after{ content:''; display:block; width:100%; height:56px; background:url(../images/icons/banner_btm.png) center bottom no-repeat; position:absolute; left:0; bottom:0; z-index:5;}
.ibanner .swiper-slide a{ display:block; height:100%; background:#fff center no-repeat; background-size:cover;}
.ibanner .swiper-pagination{ height:15px; bottom:6%;}
.ibanner .swiper-pagination-bullet{ width:11px; height:11px; background:none; border:2px solid #fff; margin:0 12px !important; border-radius:50%; vertical-align:top; opacity:1;}
.ibanner .swiper-pagination-bullet-active{ border:0; padding:2px; background:linear-gradient(#e31771, #910c78); opacity:1;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ display:none; width:60px; height:60px; margin-top:-30px;}
.ibanner .swiper-button-prev{ background:url(../images/icons/prev.png) center no-repeat; background-size:contain;}
.ibanner .swiper-button-next{ background:url(../images/icons/next.png) center no-repeat; background-size:contain;}

.main{ width:auto;}
.ibox{ overflow:hidden; position:relative;}
.ibox .con{ width:1200px; overflow:hidden; margin:0 auto;}
.ibox h2.title{ display:block; line-height:2.75; color:#333; font-size:40px; text-align:center; overflow:hidden; padding:0.675em 0 0;}
.ibox h2.title span{ display:block; line-height:2.45; font-size:0.375em; font-weight:normal; text-transform:uppercase; opacity:0.5;}
.ibox{ overflow:hidden;}

.box1{ background:url(../images/icons/box1_bg.png) center no-repeat;}
.box1 .con{ position:relative; z-index:3;}
.box1 .txt{ line-height:2.5; color:#333; font-size:16px; text-align:center; padding:0 10%;}
.box1 p.count{ display:block; text-align:center; overflow:hidden;}
.box1 p.count span{ display:block; width:25%; color:#333; font-size:16px; font-weight:bold; padding:1em 0 2.5em; float:left;}
.box1 p.count span b{ line-height:1.7; color:#e31771; font-size:3em;}
.box1 p.count span em{ display:block; line-height:1.5; color:#999;}
.box1 ul{ display:block; overflow:hidden; margin:0 -4px 7%;}
.box1 ul li{ display:block; width:20%; float:left;}
.box1 ul li a{ display:block; line-height:2; color:#666; font-size:18px; text-align:center; background:#f7f7f7; overflow:hidden; padding:1.22em 0 0.88em; margin:0 4px;}
.box1 ul li a em{ display:block; width:2.22em; height:2.22em; background:transparent center top no-repeat; background-size:100% 200%; margin:0 auto 0.7em; transition:transform ease 0.4s;}
.box1 ul li a em.ab1{ background-image:url(../images/icons/ab01.png);}
.box1 ul li a em.ab2{ background-image:url(../images/icons/ab02.png);}
.box1 ul li a em.ab3{ background-image:url(../images/icons/ab03.png);}
.box1 ul li a em.ab4{ background-image:url(../images/icons/ab04.png);}
.box1 ul li a em.ab5{ background-image:url(../images/icons/ab05.png);}
.box1 ul li a em.ab6{ background-image:url(../images/icons/ab06.png);}
.box1 ul li a:hover{ color:#fff; font-weight:bold; background:#910c78;}
.box1 ul li a:hover em{ background-position:center bottom; transform:rotateY(180deg);}

.box2{ background:url(../images/icons/box2_bg.jpg) center no-repeat; background-size:cover;}
.box2 .con{ overflow:visible; position:relative; z-index:3;}
.box2 .pro-swiper{ position:relative; margin:1.5% 0 6%;}
.box2 .pro-swiper .swiper-button-prev{ width:52px; height:52px; background:url(../images/icons/prev1.png) center no-repeat; left:-86px; margin-top:-32px;}
.box2 .pro-swiper .swiper-button-next{ width:52px; height:52px; background:url(../images/icons/next1.png) center no-repeat; right:-86px; margin-top:-32px;}
.box2 .pro-swiper .swiper-container{ padding:15px 15px 25px; margin:0 -15px;}
.box2 .pro-swiper .swiper-slide a{ display:block; background:#910c78; padding:8px 0 0; overflow:hidden; border-radius:8px; box-shadow:0 5px 15px rgba(0,0,0,0.35); position:relative;}
.box2 .pro-swiper .swiper-slide a span{ display:block; line-height:2.25; color:#444; font-size:16px; text-align:center; overflow:hidden; background:#fff; padding:0.88em 0 1em; border-radius:8px 8px 0 0;}
.box2 .pro-swiper .swiper-slide a img{ display:block; width:100%; transition:all ease 0.4s;}
.box2 .pro-swiper .swiper-slide a i{ display:block; width:50%; height:100%; background:url(../images/icons/pro_mark.png) right bottom no-repeat; background-size:contain; position:absolute; right:0; bottom:0;}
.box2 .pro-swiper .swiper-slide a:hover span{ color:#e31771;}
.box2 .pro-swiper .swiper-slide a:hover img{ transform:scale(1.04);}

.box3{ position:relative;}
.box3 .con{ position:relative; z-index:3;}
.box3 h2.title{ margin-bottom:2%;}
.box3 .video{ width:50%; height:440px; position:relative; float:left; margin-bottom:7.5%;}
.box3 .video video{ display:block; width:100%; height:100%; opacity:0;}
.box3 .video .poster{ width:100%; height:100%; background:url(../images/upload/poster.jpg) center no-repeat; background-size:cover; position:absolute; left:0; top:0; z-index:9; cursor:pointer;}
.box3 .video .poster::before{ content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.7) url(../images/icons/video_mark.png) center no-repeat; position:absolute; left:0; top:0;}
.box3 ul{ display:block; overflow:hidden; margin-bottom:7.5%;}
.box3 ul li{ display:block; overflow:hidden; padding:20px 16px 20px 7%;}
.box3 ul li:hover{ background:#f7f7f7;}
.box3 ul li span{ display:block; width:70px; height:70px; line-height:1; color:#fff; font-size:12px; text-align:center; background:#910c78; border-radius:5px; float:left; margin-right:22px;}
.box3 ul li em{ display:block; line-height:1.6; font-size:2.5em; font-weight:bold;}
.box3 ul li a{ display:block; line-height:30px; color:#333; font-size:17px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.box3 ul li a:hover{ color:#e31771;}
.box3 ul li .txt{ display:block; height:40px; line-height:20px; color:#999; font-size:13px;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

.box4{ background:url(../images/icons/box4_bg.jpg) center top no-repeat; background-size:cover;}
.box4 .con{ overflow:visible;}
.box4 dl{ display:block; width:30%; font-size:16px; text-align:center; background:rgba(255,255,255,0.7); float:left; margin:7% 0 7% 5%;}
.box4 dl:first-child{ margin-left:0;}
.box4 dl dt{ display:block; line-height:1.75; overflow:hidden;}
.box4 dl dt b{ display:block; color:#333; font-size:1.5em; padding:1.125em 0 0;}
.box4 dl dt span{ display:block; color:#999; text-transform:uppercase; padding:0 0 0.75em;}
.box4 dl dt img{ display:block; height:4.5em; margin:0.85em auto 1.85em;}
.box4 dl dd{ display:block; padding:0.8325em 0; margin:0 15%;}
.box4 dl:nth-child(2) dd{ padding:0.3125em 0;}
.box4 dl dd a{ display:block; line-height:2.375; color:#333; border:1px dashed #535353; border-radius:1.25em;}
.box4 dl dd a:hover{ color:#e31771; border-color:#e31771;}
.box4 dl dd.block{ display:none;}
.box4 dl dd.block a{ opacity:0;}
.box4 dl dd.block a::after{ content:'.';}


/*pc适配*/
@media only screen and (max-width:1366px){
.ibanner{ height:700px;}
}

@media only screen and (max-width:1240px){
.ibanner{ height:54vw;}
.ibanner .swiper-pagination{ bottom:2vw;}
.ibox .con{ width:auto; margin:0 20px;}
.box1 .txt{ padding:0 5%;}
.box2 .pro-swiper{ margin-left:6%; margin-right:6%;}
.box2 .pro-swiper .swiper-button-prev{ transform:scale(0.8); transform-origin:right center;}
.box2 .pro-swiper .swiper-button-next{ transform:scale(0.8); transform-origin:left center;}
}

@media only screen and (max-width:1024px){
.ibanner .swiper-pagination{ bottom:2vw;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ display:none; width:40px; height:40px; margin-top:-20px;}
.ibox .con{ width:auto; margin:0 20px 2%;}
.ibox h2.title{ font-size:36px; padding:1em 0 0;}

.box1 .txt{ padding:0;}
.box1 p.count span{ font-size:14.5px;}
.box1 p.count span b/{ font-size:2.8em;}
.box2 .pro-swiper{ margin-left:10%; margin-right:10%;}
.box2 .pro-swiper .swiper-container{ padding:5px 10px 15px;}
.box2 .pro-swiper .swiper-slide a{ box-shadow:0 5px 10px rgba(0,0,0,0.35);}
.box3 .video{ width:80vw; height:45vw; float:none; margin:0 auto 4%;}
.box3 ul li{ width:50%; box-sizing:border-box; padding:16px 20px; float:left;}
.box3 ul li a{ font-size:16px;}
.box3 ul li span{ transform:scale(0.9); transform-origin:left center; margin-right:10px;}
.box4 dl{ width:32%; font-size:14px; margin-left:2%;}
.box4 dl dt img{ height:3.5em;}
}

@media only screen and (max-width:767px){
.ibanner{ height:62vw;}
.ibanner .swiper-pagination{ height:10px; bottom:3vw;}
.ibanner .swiper-pagination-bullet{ width:6px; height:6px; border-width:2px; border-radius:50%; margin:0 4px !important;}
.ibox .con{ margin:0 12px;}
.ibox h2.title{ font-size:22px; padding-top:0.6em;}

.box1 .txt{ font-size:14px;}
.box1 p.count{ padding:1em 0 2.5em;}
.box1 p.count span{ width:50%; font-size:14px; padding:0;}
.box1 p.count span b{ font-size:2.2em;}
.box1 ul li a{ font-size:13px; padding:0.8em 0 0.3em;}
.box1 ul li a em{ margin-bottom:0.1em;}

.box2 .pro-swiper{ margin-left:20%; margin-right:20%;}
.box2 .pro-swiper .swiper-button-prev,
.box2 .pro-swiper .swiper-button-next{ transform:scale(0.64);}

.box3 .video{ width:100%; height:52.5vw;}
.box3 .video .poster::before{ background-size:20% auto;}
.box3 ul li{ width:100%; padding:2px 0;}
.box3 ul li span{ transform:scale(0.8) translateY(2px); margin-right:0;}
.box3 ul li a{ font-size:14px;}
.box3 ul li .txt{ font-size:12px; line-height:18px; height:36px;}
.box3 ul li:hover{ background:none;}

.box4 dl{ width:86%; margin:6% auto !important; float:none;}
.box4 dl dd{ padding:0.4em 0 !important;}

}




/**/